<template>
  <div class="todolist">
    <h2>TodoList</h2>

    <!-- 输入采集器 -->
    <!-- 接收和处理子组件发送的自定义事件 -->
    <UserInputer @userInputOK="addTodo">
      <template #actionBtn="{ userInput }">
        <button
          :style="{ width: '100px', marginLeft: '5px' }"
          @click="addTodo(userInput)"
        >
          +
        </button>
      </template>
    </UserInputer>

    <!-- 数据展示器 -->
    <!-- :toggleItem="toggleTodoStatus" 直接将切换土豆状态的方法以props的形式传入子组件 -->
    <DataLister
      :dataArr="todos"
      @item-delete-btn-click="deleteTodo"
    ></DataLister>
  </div>
</template>

<script setup>
import UserInputer from "./UserInputer.vue";
import DataLister from "./DataLister.vue";

import { ref } from "vue";

const todos = ref([
  {
    id: 1,
    text: "杀到东京",
    done: true,
  },
  {
    id: 2,
    text: "夺了鸟位",
    done: false,
  },
  {
    id: 3,
    text: "让俺哥哥当大宋皇帝",
    done: false,
  },
  {
    id: 4,
    text: "陪哥哥喝御酒",
    done: true,
  },
]);

const addTodo = (name) => {
  console.log("addTodo", name);
};

const deleteTodo = (id) => {
  const index = todos.value.findIndex((item, index) => item.id === id);
  if (index !== -1) {
    todos.value.splice(index, 1);
  }
};
</script>

<style lang="scss" scoped>
.todolist {
  width: 800px;
  margin: 100px auto;
  border: 1px solid black;
  border-radius: 5px;
  padding: 10px;

  h2 {
    text-align: center;
    background-color: black;
    color: white;
    margin-bottom: 10px;
  }
}
</style>
